<template>
  <div>
    <!--  -->
    <el-input v-model="value" placeholder="请搜索内容"></el-input>
		<!--  -->
		<el-button v-show="ids.length" type="danger" @click="handleDeleteAll">删除所选</el-button>
    <!-- 列表 -->
    <el-table :data="list" @selection-change="selectionChange">
			<el-table-column type="selection"></el-table-column>
      <el-table-column prop="id" label="ID"></el-table-column>
      <el-table-column prop="name" label="姓名"></el-table-column>
      <el-table-column prop="age" label="年龄"></el-table-column>
      <el-table-column prop="tel" label="电话"></el-table-column>
      <el-table-column prop="sex" label="性别"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button type="primary">编辑</el-button>
          <el-button type="danger" @click="handleDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-pagination
      class="page"
      background
      layout="prev, pager, next"
      :total="total"
      :page-size="pageConfig.pageSize"
      @current-change="changePageCode"
    ></el-pagination>
  </div>
</template>


<script>
import axios from "axios";
export default {
  name: "listView",
  data() {
    return {
      list: [],
      total: 0,
      pageConfig: {
        pageCode: 1,
        pageSize: 8,
      },
      value: "",
			ids: []
    };
  },
	watch: {
		value() {
			this.getList()
		}
	},
  methods: {
    async getList() {
      const resp = await axios.get("/api/user/list", {
        params: {
          ...this.pageConfig,
          value: this.value,
        },
      });
      this.list = resp.data.data;
      this.total = resp.data.total;
    },
    changePageCode(newPageCode) {
      this.pageConfig.pageCode = newPageCode;
      this.getList();
    },
		async handleDelete(row) {
			await axios.post('/api/user/list/delete', { id: row.id });
			this.$message({
				type: 'success',
				message: '删除成功！！'
			})
			this.getList()
		},
		async handleDeleteAll() {
			await axios.post('/api/user/lists/delete', { ids: this.ids })
				this.$message({
				type: 'success',
				message: '删除所选成功！！'
			})
			this.getList()
		},
		selectionChange(selection) {
			this.ids = selection.map(v => v.id)
		}
  },
  mounted() {
    this.getList();
  },
};
</script>


<style scoped>
.page {
}
</style>